{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商库存管理系统</title>
    <!-- 原有样式 -->
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        /* 导航栏容器 */
        .navbar {
            background-color: #2c3e50;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            height: 52px; /* 统一高度 */
        }
        /* 导航链接样式 */
        .navbar a {
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 鼠标悬停效果 */
        .navbar a:hover {
            background-color: #3498db;
        }

        /* 当前活动页签 */
        .navbar a.active {
            background-color: #2980b9;
        }

        /* 轮播图容器 */
        .slider {
            width: 100%;
            height: auto;
            margin-top: 60px;
            position: relative;
            overflow: hidden;
            background-color: #f5f5f5;
        }

        /* 轮播图片样式 */
        .slider img {
            width: 100%;
            height: 250px;
            display: none;
            position: relative;
            transition: opacity 1s ease-in-out;
        }

        /* 当前显示的图片 */
        .slider img.active {
            display: block;
            opacity: 1;
        }

        /* 轮播指示器 */
        .slider-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 10;
        }

        .slider-indicators span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
        }

        .slider-indicators span.active {
            background-color: white;
        }

        /* 主要内容容器 */
        .main-content {
            display: flex;
            padding: 20px;
        }

        /* 商品信息容器 */
        .inventory-container {
            width: 800px;
            height: 500px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1),
                        0 6px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-right: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        /* 悬停效果 */
        .inventory-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15),
                        0 10px 10px rgba(0, 0, 0, 0.1);
        }

        /* 入库信息标题 */
        .inventory-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }

        /* 入库信息表格 */
        .inventory-table {
            width: 100%;
            border-collapse: collapse;
        }

        .inventory-table th {
            background-color: #3498db;
            color: white;
            padding: 12px;
            text-align: left;
        }

        .inventory-table td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
        }

        .inventory-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .inventory-table tr:hover {
            background-color: #f1f1f1;
        }

        /* 没有数据时的提示 */
        .no-data {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-style: italic;
        }

        /* 右侧内容区域 */
        .content {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        /* 库存趋势图容器 */
        .chart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1),
                        0 6px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
            height: 500px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .chart-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15),
                        0 10px 10px rgba(0, 0, 0, 0.1);
        }

        .chart-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }

        /* 图表canvas样式 */
        #inventoryChart {
            width: 100% !important;
            height: 400px !important;
        }

        /* 欢迎文字容器 */
        .welcome-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999;
            pointer-events: none;
            background-color: rgba(255, 255, 255, 0.8);
        }

        /* 欢迎文字样式 */
        .welcome-text {
            font-size: 3rem;
            color: #2c3e50;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
            animation: welcomeFadeIn 2s forwards;
            opacity: 0;
            transform: scale(0.9);
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        }

        /* 欢迎文字动画 */
        @keyframes welcomeFadeIn {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes welcomeFadeOut {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.8);
            }
        }

        .navbar svg {
            fill: white;
            margin-right: 5px;
            position: relative;
            top: 5px;
        }

        /* 新增AI悬浮功能 */
        .ai-floating-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: #3498db;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: transform 0.3s;
            z-index: 1000;
            color: white;
        }

        .ai-floating-btn:hover {
            transform: scale(1.1);
            background: #2980b9;
        }

        /* 聊天窗口容器 */
        .ai-chat-container {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 400px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            display: none;
            z-index: 1001;
            flex-direction: column;
            max-height: 70vh;
        }

        /* 聊天窗口头部 */
        .ai-header {
            background: #2c3e50;
            color: white;
            padding: 16px 20px;
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }

        /* 关闭按钮 */
        .ai-close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            line-height: 1;
            padding: 0 8px;
        }

        /* 聊天内容区域 */
        .ai-chat-box {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* 消息通用样式 */
        .ai-message {
            max-width: 85%;
            padding: 12px 16px;
            border-radius: 18px;
            line-height: 1.5;
            animation: fadeIn 0.3s ease;
        }

        /* 用户消息 */
        .ai-user-message {
            background: #e3f2fd;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        /* 机器人消息 */
        .ai-bot-message {
            background: #f5f5f5;
            margin-right: auto;
            border-bottom-left-radius: 4px;
        }

        /* 输入区域 */
        .ai-input-box {
            display: flex;
            padding: 16px;
            border-top: 1px solid #eee;
            gap: 10px;
        }

        .ai-input-box input {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid #ddd;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }

        .ai-input-box input:focus {
            border-color: #3498db;
        }

        .ai-input-box button {
            padding: 12px 24px;
            background: #3498db;
            border: none;
            border-radius: 25px;
            color: white;
            cursor: pointer;
            transition: background 0.3s;
        }

        .ai-input-box button:hover {
            background: #2980b9;
        }

        /* 加载指示器 */
        .ai-typing-indicator {
            display: inline-block;
            padding: 12px 20px;
            background: #f5f5f5;
            border-radius: 18px;
            color: #666;
            font-style: italic;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <a class="active" href="{% url 'index' %}">
            <svg t="1744378877217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" width="20" height="20">
                <path d="M878.482153 464.406184L558.225616 193.502577a71.195266 71.195266 0 0 0-92.353503 0L145.517847 464.406184v64.012216l73.003245-61.764458v306.183622c0 37.332315 30.295858 67.628173 67.628173 67.628174h452.483298c37.332315 0 67.628173-30.295858 67.628174-67.628174V467.142584l72.319145 61.178088v-64.012216zM594.287459 791.699179H429.712541v-150.502004c0-45.346058 36.941401-82.287459 82.287459-82.287459s82.287459 36.941401 82.287459 82.287459v150.502004z m163.011262-18.763886c0 10.359229-8.404657 18.763886-18.763886 18.763886h-95.383088v-150.502004c0-72.319145-58.832602-131.151747-131.151747-131.151746s-131.151747 58.832602-131.151747 131.151746v150.502004h-94.698988a18.763886 18.763886 0 0 1-18.763886-18.763886V425.412483L497.438442 230.834892c8.404657-7.134186 20.718458-7.134186 29.220844 0l230.639435 195.163963V773.033022z" p-id="2906"></path>
            </svg>
            首页
        </a>
        <a href="{% url 'user' %}">
            <svg t="1744381512123" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3903" width="20" height="20">
                <path d="M512 447.223c-88.224 0-160-71.776-160-160s71.776-160 160-160c88.225 0 160 71.776 160 160s-71.775 160-160 160z m0-256c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zM454.901 870.594c-96.594 0-184.933-3.802-231.263-49.955C203.308 800.386 193 774.164 193 742.701c0-31.629 10.247-62.812 30.457-92.686 17.978-26.573 42.908-50.741 74.098-71.833C359.256 536.46 437.418 512.53 512 512.53c74.55 0 152.55 23.943 214.002 65.691 31.05 21.094 55.861 45.273 73.746 71.867C819.822 679.937 830 711.096 830 742.701c0 31.552-10.317 57.827-30.664 78.097-50.714 50.521-151.822 50.128-258.88 49.723a7395.45 7395.45 0 0 0-56.914-0.001c-9.605 0.037-19.163 0.074-28.641 0.074zM512 806.447c9.567 0 19.149 0.037 28.701 0.073 49.52 0.191 96.284 0.37 135.808-4.396 38.418-4.633 64.546-13.604 77.659-26.668 5.079-5.06 11.832-13.96 11.832-32.755 0-38.089-27.688-78.744-75.963-111.54C638.933 596.442 574.04 576.53 512 576.53c-126.309 0-255 83.862-255 166.171 0 18.675 6.738 27.547 11.807 32.596 32.045 31.922 128.975 31.55 214.491 31.224 9.556-0.037 19.139-0.074 28.702-0.074z" fill="" p-id="3904"></path>
            </svg>
            用户信息
        </a>
        <a href="{% url 'shop' %}">
            <svg t="1744383464603" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6572" width="20" height="20"><path d="M924 467.1H768.2c-10.8 0-19.5 8.7-19.5 19.5s8.7 19.5 19.5 19.5h136.3v331.1H690.3V175c0-21.5-17.4-38.9-38.9-38.9H378.7c-21.5 0-38.9 17.4-38.9 38.9v662.1H125.6V408.7h136.3c10.8 0 19.5-8.7 19.5-19.5s-8.7-19.5-19.5-19.5H106.1c-10.8 0-19.5 8.7-19.5 19.5v467.4c0 10.8 8.7 19.5 19.5 19.5H924c10.8 0 19.5-8.7 19.5-19.5v-370c0-10.8-8.8-19.5-19.5-19.5z m-272.6 370H378.7V213.9c0-21.5 17.4-38.9 38.9-38.9h194.7c21.5 0 38.9 17.4 38.9 38.9v623.2zM456.6 311.3v19.5H515v97.4h39V252.9h-39l-58.4 58.4z" p-id="6573"></path></svg>
            排行榜
        </a>
    </div>

    <!-- 轮播图容器 -->
    <div class="slider">
        <img src="{% static 'images/banner9.jpg' %}" alt="轮播图1" class="active">
        <img src="{% static 'images/banner8.jpg' %}" alt="轮播图2">
        <img src="{% static 'images/banner10.jpg' %}" alt="轮播图3">

        <!-- 轮播指示器 -->
        <div class="slider-indicators">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <div class="main-content">
        <!-- 商品信息容器 -->
        <div class="inventory-container">
            <div class="inventory-title">商品信息</div>
            {% if products %}
            <table class="inventory-table">
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>编号</th>
                        <th>规格</th>
                        <th>进价</th>
                        <th>售价</th>
                        <th>库存</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td>{{ product.name }}</td>
                        <td>{{ product.code }}</td>
                        <td>{{ product.get_spec_display }}</td>
                        <td>{{ product.cost }}</td>
                        <td>{{ product.price }}</td>
                        <td>{{ product.stock }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="no-data">
                <p>暂无商品数据</p>
            </div>
            {% endif %}
        </div>

        <!-- 右侧内容区域 -->
        <div class="content">
            <!-- 库存趋势图 -->
            <div class="chart-container">
                <div class="chart-title">入库出库趋势</div>
                <div class="chart-wrapper">
                    <canvas id="inventoryChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- 欢迎文字容器 -->
    <div class="welcome-container" id="welcomeContainer">
        <div class="welcome-text" id="welcomeText">欢迎来到电商库存管理系统</div>
    </div>

    <!-- AI悬浮按钮和聊天窗口 -->
    <div class="ai-floating-btn" id="aiButton">🤖</div>
    <div class="ai-chat-container" id="aiChat">
        <div class="ai-header">
            <span>DeepSeek 智能助手</span>
            <button class="ai-close-btn" onclick="toggleChat()">×</button>
        </div>
        <div class="ai-chat-box" id="aiChatBox"></div>
        <form class="ai-input-box" onsubmit="sendMessage(event)">
            {% csrf_token %}
            <input type="text" id="aiMessageInput" placeholder="输入您的问题..." required>
            <button type="submit">发送</button>
        </form>
    </div>

    <!-- 引入Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
    // 页面加载时显示欢迎信息
    document.addEventListener('DOMContentLoaded', function() {
        // 确保文本的动画效果正确启动
        const welcomeText = document.getElementById('welcomeText');
        welcomeText.style.animation = 'welcomeFadeIn 2s forwards';

        // 设置点击事件关闭欢迎信息
        document.addEventListener('click', function() {
            const welcomeContainer = document.getElementById('welcomeContainer');
            const welcomeText = document.getElementById('welcomeText');

            if (welcomeContainer.style.display !== 'none') {
                welcomeText.style.animation = 'welcomeFadeOut 0.5s forwards';

                // 动画结束后完全移除元素
                setTimeout(() => {
                    welcomeContainer.style.display = 'none';
                }, 500);
            }
        });

        // 轮播图功能
        const slides = document.querySelectorAll('.slider img');
        const indicators = document.querySelectorAll('.slider-indicators span');
        let currentSlide = 0;
        const slideCount = slides.length;

        // 切换幻灯片函数
        function showSlide(index) {
            // 隐藏所有幻灯片
            slides.forEach(slide => {
                slide.classList.remove('active');
                slide.style.opacity = '0';
            });
            indicators.forEach(indicator => indicator.classList.remove('active'));

            // 显示当前幻灯片
            slides[index].classList.add('active');
            slides[index].style.opacity = '1';
            indicators[index].classList.add('active');

            currentSlide = index;
        }

        // 自动轮播
        function nextSlide() {
            currentSlide = (currentSlide + 1) % slideCount;
            showSlide(currentSlide);
        }

        // 点击指示器切换
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                showSlide(index);
            });
        });

        // 设置自动轮播间隔（5秒）
        setInterval(nextSlide, 5000);

        // 初始显示第一张
        showSlide(0);

        // 初始化库存趋势图表
        const ctx = document.getElementById('inventoryChart').getContext('2d');
        const inventoryChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: {{ times|safe }},
                datasets: [{
                    label: '入库数量',
                    data: {{ inbound_by_time|safe }},
                    backgroundColor: 'rgba(46, 204, 113, 0.2)',
                    borderColor: 'rgba(46, 204, 113, 1)',
                    borderWidth: 2,
                    tension: 0.3
                }, {
                    label: '出库数量',
                    data: {{ outbound_by_time|safe }},
                    backgroundColor: 'rgba(231, 76, 60, 0.2)',
                    borderColor: 'rgba(231, 76, 60, 1)',
                    borderWidth: 2,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: false
                    },
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '数量'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: '时间'
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    });

    // AI功能
    const aiChat = document.getElementById('aiChat');
    const aiButton = document.getElementById('aiButton');
    let isFirstOpen = true;
    let isSending = false;
    const chatBox = document.getElementById('aiChatBox');
    const input = document.getElementById('aiMessageInput');

    function toggleChat() {
        const isHidden = aiChat.style.display === 'none';
        aiChat.style.display = isHidden ? 'flex' : 'none';

        if (isHidden && isFirstOpen) {
            chatBox.innerHTML = `
                <div class="ai-message ai-bot-message">
                    <div style="font-weight:500;margin-bottom:8px">您好！我是DeepSeek智能助手</div>
                    <div style="color:#666;font-size:0.9em">
                    </div>
                </div>
            `;
            isFirstOpen = false;
        }
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    async function sendMessage(e) {
        e.preventDefault();
        if (isSending) return;

        const message = input.value.trim();
        if (!message) return;

        isSending = true;

        try {
            const userDiv = document.createElement('div');
            userDiv.className = 'ai-message ai-user-message';
            userDiv.textContent = message;
            chatBox.appendChild(userDiv);

            const typingDiv = document.createElement('div');
            typingDiv.className = 'ai-message ai-bot-message';
            typingDiv.innerHTML = '<div class="ai-typing-indicator">思考中...</div>';
            chatBox.appendChild(typingDiv);
            chatBox.scrollTop = chatBox.scrollHeight;

            const response = await fetch('/chat/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    'message': message,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                })
            });

            const data = await response.json();
            typingDiv.remove();

            const botDiv = document.createElement('div');
            botDiv.className = 'ai-message ai-bot-message';
            chatBox.appendChild(botDiv);
            let replyText = data.reply || '暂时无法回答该问题';
            let i = 0;
            const printLetter = () => {
                if (i < replyText.length) {
                    botDiv.textContent += replyText.charAt(i);
                    i++;
                    setTimeout(printLetter, 50); // 调整打印速度
                }
            };
            printLetter();


        } catch (error) {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'ai-message ai-bot-message';
            errorDiv.innerHTML = `
                <div style="color:red;padding:10px;font-size:0.9em">
                    <div>错误: ${error.message}</div>
                    <button style="margin-top:8px;padding:4px 12px;background:#eee;border-radius:4px"
                        onclick="retrySend()">重试</button>
                </div>
            `;
            chatBox.appendChild(errorDiv);
        } finally {
            input.value = '';
            isSending = false;
            chatBox.scrollTop = chatBox.scrollHeight;
        }
    }

    window.retrySend = () => {
        const lastFailedMessage = document.querySelector('.ai-message .ai-typing-indicator');
        if (lastFailedMessage) {
            lastFailedMessage.closest('.ai-message').remove();
            sendMessage(new Event('retry'));
        }
    };

    aiButton.addEventListener('click', toggleChat);
    input.addEventListener('keydown', e => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            if (!isSending) sendMessage(e);
        }
    });
    document.addEventListener('click', e => {
        if (!aiChat.contains(e.target) &&
            !aiButton.contains(e.target) &&
            aiChat.style.display !== 'none'
        ) {
            aiChat.style.display = 'none';
        }
    });

    aiChat.style.display = 'none';
</script>
</body>
</html>